<template>
	<view class="detail" v-if="goodsDetail.goods_price">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" circular>
			<swiper-item v-for="(item, index) in goodsDetail.pics" :key="index">
				<image @click="previewImg(index)" :src="item.pics_big_url" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="info">
			<view class="price">
				￥{{ goodsDetail.goods_price }}
			</view>
			<view class="title">
				<view class="left">
					{{ goodsDetail.goods_name }}
				</view>
				<view class="right">
					<uni-icons type="star" color="#8f8f8f" size="24"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="pass">
				快递：免运费
			</view>
		</view>
		<rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
		<uni-goods-nav class="mygoodsnav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="goodsClick"
			@buttonClick="goodsButtonClick" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState('cart', ['num']),
			...mapGetters('cart', ['total'])
		},
		watch: {
			total: {
				handler: function(newV) {
					this.options[1].info = newV
				},
				// 立即执行
				immediate: true
			}
		},
		data() {
			return {
				// 商品id
				goods_id: '',
				// 商品对象
				goodsDetail: {},
				options: [{
						icon: 'shop',
						text: '店铺',
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 1,
						infoBackgroundColor: '#f00',
						infoColor: "#f5f5f5"
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#f00',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
			};
		},
		methods: {
			...mapMutations('cart', ['addToCart']),
			// 点击左侧结构会触发
			goodsClick(e) {
				// console.log('left');
				// 当点击购物车时，跳转到购物车页面
				if (e.content.text === '购物车') {
					// 跳转到购物车页面
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			goodsButtonClick(e) {
				if (e.index === 0) {
					// 生成商品信息对象
					this.addToCart({
						goods_id: this.goodsDetail.goods_id,
						goods_name: this.goodsDetail.goods_name,
						goods_price: this.goodsDetail.goods_price,
						goods_small_logo: this.goodsDetail.goods_small_logo,
						goods_count: 1,
						goods_status: true
					})
					// 提示添加成功
					uni.showToast({
						title: '加入购物车成功...'
					})
				}
			},
			// 点击右侧结构会触发
			// 预览图片
			previewImg(index) {
				const newArr = this.goodsDetail.pics.map(item => {
					return item.pics_big_url
				})
				uni.previewImage({
					current: index,
					urls: newArr // 传入数组
				})
			},
			async getGoodsDetail() {
				const {
					data: res
				} = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goods_id}`)
				// console.log(res)
				if (res.meta.status !== 200) return uni.$showMsg()
				this.goodsDetail = res.message
				// 将goods_introduce 中的 img 添加上 display: block
				// 返回新的值，故需重新赋值
				this.goodsDetail.goods_introduce = this.goodsDetail.goods_introduce.replace(/<img /g,
					'<img style="display: block" ')
				// 将goods_introduce 中的 img 图片的后缀改为 jpg
				this.goodsDetail.goods_introduce = this.goodsDetail.goods_introduce = this.goodsDetail.goods_introduce
					.replace(/.webp/g, '.jpg')
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			// 发送请求，根据id得到商品对象
			this.getGoodsDetail()
		}
	}
</script>

<style lang="scss">
	.detail {
		padding-bottom: 50px;

		.swiper {
			height: 750rpx;

			image {
				width: 100%;
				height: 750rpx;
			}
		}

		.info {
			// margin-bottom: 50px;
			padding: 0 20rpx;

			.price {
				color: #c00000;
				font-size: 20px;
				line-height: 80rpx;
			}

			.title {
				display: flex;
				font-size: 14px;

				.left {
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					// display: -webkit-box;
					// text-overflow: ellipsis;
					// overflow: hidden;
					// -webkit-line-clamp: 2; // 设置两行文字溢出
					// -webkit-box-orient: vertical;
					border-right: 1px solid #ccc;
					height: 80rpx;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 300rpx;
					color: #8f8f8f;
				}
			}

			.pass {
				font-size: 12px;
				color: #8f8f8f;
				line-height: 80rpx;
			}
		}

		.mygoodsnav {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
		}
	}
</style>
